<template>
  <div>
    <!-- 放到卡片中 -->
    <el-card class="box-card filter-card">
      <div slot="header" class="clearfix">
         <!-- 面包屑路经导航 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>内容管理</el-breadcrumb-item>
        </el-breadcrumb>
        <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
      </div>
       <!-- 数据筛选表单 -->
        <el-form ref="form" :model="form" label-width="40px" size="mini">
          <el-form-item label="状态">
            <el-radio-group v-model="status">
              <el-radio :label="null">全部</el-radio>
              <el-radio :label="0">草稿</el-radio>
              <el-radio :label="1">待审核</el-radio>
              <el-radio :label="2">审核通过</el-radio>
              <el-radio :label="3">审核失败</el-radio>
              <el-radio :label="4">已删除</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="频道">
            <el-select v-model="channelId" placeholder="请选择频道">
              <el-option label="全部" :value="null"></el-option>
              <el-option :label="channel.name" :value="channel.id"
                v-for="(channel, index) in channels" :key="index"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="日期">
            <el-date-picker
              v-model="rangeDate"
              type="datetimerange"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :default-time="['12:00:00']"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              >
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <!-- button的click事件当你没有传递指定的参数时 会默认传递一个 -->
            <el-button type="primary" @click="loadUserArticle(1)" :disabled="loading">查询</el-button>
          </el-form-item>
        </el-form>
      </el-card>

      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>根据筛选条件共查询到{{totalCount}}条结果</span>
        </div>
        <!-- table表单 -->
          <el-table
            v-loading="loading"
            :data="tableData"
            stripe
            border
            style="width: 100%"
            class="list-table"
            size="small"
            >
            <el-table-column
              label="封面"
              >
              <template slot-scope="scope">
                  <!-- 运行期间动态改变处理而本地图片必须在打包的时候就存在 -->
                <!-- <img :src="scope.row.cover.images[0]||'./th.png'" alt=""> -->
                <!-- <img class="article-cover" v-if="scope.row.cover.images[0]" :src="scope.row.cover.images[0]"/>
                <img v-else class="article-cover" src="./th.png" alt=""/> -->
                <!-- 自动有图片加载失败甜筒 -->
                <el-image
                  style="width: 60px; height: 60px"
                  :src="scope.row.cover.images[0]"
                  fit="cover"
                  lazy
                  >
                    <div slot="placeholder" class="image-slot">
                      加载中<span class="dot">...</span>
                    </div>
                  </el-image>
              </template>
            </el-table-column>
            <el-table-column
              label="标题"
              >
              <template slot-scope="scope">
                <span>{{ scope.row.title }}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="状态"
              >
              <template slot-scope="scope">
                  <div slot="reference" class="name-wrapper">
                    <el-tag :type="articleStatus[scope.row.status][1]" size="medium" >{{articleStatus[scope.row.status][0]}}</el-tag>
                  </div>
              </template>
            </el-table-column>
            <el-table-column
              label="发布时间"
              >
              <template slot-scope="scope">
                <i class="el-icon-time"></i>
                <span>{{ scope.row.pubdate }}</span>
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  circle
                  type="primary"
                  icon="el-icon-edit"
                  @click="$router.push({name:'publish',query:{id:scope.row.id}})"></el-button>
                <el-button
                  size="mini"
                  type="danger"
                  circle
                  icon="el-icon-delete"
                  @click="onDeleteArticle(scope.row.id,scope.$index)"></el-button>
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页 -->
          <!-- total   默认按照每页10条计算总页码 -->
          <!-- page-size每页显示条目个数支持 .async -->
          <el-pagination
            :disabled="loading"
            class="pagination"
            background
            layout="prev, pager, next"
            :page-size="pageSize"
            @current-change="onPageChange"
            :total="totalCount"
            :current-page.sync="currentPage"
            >
          </el-pagination>
      </el-card>
  </div>
</template>

<script>
import {getUserArticle,getUserChannels,deleteArticles} from '../../api/user';
export default {
  name: "Article",
  data() {
    return {
      form: {
          name: '',
          date2: '',
          delivery: false,
          type: [],
          desc: ''
        },
        articleStatus:[['草稿','info'],['待审核',''],['审核通过','success'],['审核失败','danger'],['已删除','warning']], //状态
        tableData: JSON.parse(window.localStorage.getItem('tableDate'))||[],
        //   date: '2016-05-02',
        //   name: '审核通过',
        //   title: '1518 弄',
        //   src:''
        // }, {
        //   date: '2016-05-04',
        //   name: '审核通过',
        //   title: '金沙江路 1517 弄',
        //   src:''
        // }, {
        //   date: '2016-05-01',
        //   name: '审核通过',
        //   title: '上海市普陀区金沙江路 1519 弄',
        //   src:''
        // }, {
        //   date: '2016-05-03',
        //   name: '审核通过',
        //   title: '上海市普陀区金沙江路 1516 弄',
        //   src:''
        // }]
        // page:1,
        totalCount:0,  //总条数
        pageSize:10 , //每页条目
        status:null, //状态,
        channels:[], //文章频道列表
        channelId:null,  //频道id
        rangeDate:null, //日期范围
        loading:true, // 表单数据加载中 的 loading状态
        currentPage:1 //当前页码
    };
  },
  props: {},
  mounted() {
    this.loadUserArticle(1),
    this.loadUserChannels()
  },
  methods: {
      async loadUserArticle(page=1){
        // 点击分页切换  时开启loading
        this.loading=true
        // 如果缓存里没有tableData则请求数据
        // if(!window.localStorage.getItem('tableData')){
        try {
          const {data} = await getUserArticle({
          page:page,
          per_page:this.pageSize,
          status:this.status,
          channel_id:this.channelId,
          begin_pubdate: this.rangeDate?this.rangeDate[0]:null,//开始日期
          end_pubdate: this.rangeDate?this.rangeDate[1]:null//结束日期
        })
        // console.log(data);
        this.tableData=data.data.results
        this.totalCount=data.data['total_count']
        } catch (error) {
          this.$message(`错误${error}`)
        this.loading=false
        }
        // }else{
          // console.log(1);
        //   const {data} = await getUserArticle({
        //   page:page,
        //   per_page:this.pageSize,
        //   status:this.status,
        //   channel_id:this.channelId,
        //   begin_pubdate: this.rangeDate?this.rangeDate[0]:null,//开始日期
        //   end_pubdate: this.rangeDate?this.rangeDate[1]:null//结束日期
        // })
        //   this.tableData=JSON.parse(window.localStorage.getItem('tableData'))
        //   this.totalCount=data.data['total_count']
        // }
        // 得到数据  就可以关闭 loading 状态
        this.loading=false
      },
      async onPageChange(currentPage){
        this.loadUserArticle(currentPage)
      },
      async loadUserChannels(){
        const {data}=await getUserChannels()
        // console.log(data);
        this.channels=data.data.channels
      },
      // 删除文章
      async onDeleteArticle(id,index){
        // console.log(index);
        this.$confirm('确认删除吗?','删除提示',{
          confirmButtonText: '确定',
          cancleButtonText:'取消',
          type:'warning'
        }).then(async ()=>{
          // const {data}=await deleteArticles(id)
          // console.log(data);
            // console.log(id);
            this.tableData.splice(index,1)
              // 删除成功更新文章数据列表
              // this.loadUserArticle(this.currentPage)


          //  console.log(this.tableData);
            // if(currentIndex>=0){
            //   return false
            // }else{
            //   return true
            // }
          // })
          // console.log(this.tableData);
          // window.localStorage.setItem('tableData',JSON.stringify(this.tableData.filter(e=>{
          //    return !this.tableData.find((c)=>{
          //     //  console.log(i);
          //     return c.id===id
          //   })
          //  })))
        }).catch(()=>{
          this.$message({
            type:'info',
            message:'已取消退出'
          })
        })


      }
  },
  computed: {

  },
};
</script>

<style lang="less" scoped>
.filter-card{
  margin-bottom: 20px;
}
.list-table{
  margin-bottom: 20px;
  // display: flex;
}
.pagination{
  // position: absolute;
  // margin-left: 90%;
  transform: translateX(60%);
}
.article-cover{
  width: 80px;
  background-size: cover;
}
colgroup{
  display: flex;
  justify-content: center;
  align-items: center;
  col{
    flex: 1;
  }
}
</style>
